<template>
  <div class='container'>
     <el-dialog title="预览文章" :visible="articlePreviewshow" @close="closeDialog" ref="formRef">
      <!-- 表单 -->
        <div>
          <h2>{{ viewdata.title}}</h2>
          <span>{{ viewdata.createTime|parseTimeByString}}</span>
          <span>{{ viewdata.username}}</span>
          <span>{{ viewdata.visits}}</span>
        </div>
        <div class="footer">
          <span v-html="viewdata.articleBody" ></span>
        </div>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="closeDialog" >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    articlePreviewshow: {
      type: Boolean,
      default: false
    },
    viewdata: {
      type: Object
    }
  },
  methods: {
    // 关闭对话框
    closeDialog () {
      this.$emit('update:articlePreviewshow', false)
      // this.$refs.formRef.resetFields()
    }

  }
}
</script>

<style scoped lang='less'></style>
